<template>
    <div id="swipercom">
        <!-- <swiper
            :slides-per-view="1"
            :space-between="50"
             v-for="(item,index) in list.splice(0,1)" :key="index"
        >
            <swiper-slide><img :src="item.pic" alt=""></swiper-slide>
        </swiper> -->
        <!-- <div class="swiper" v-for="(item,index) in list.splice(0,1)" :key="index">
            <img :src="item.pic" alt="">
            <img :src="item.pic" alt="">
        </div> -->
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in imgs" :key="index">
                    <img :src="item.pic">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>    
        </div>
    </div>
</template>

<script>
    import 'swiper/css/swiper.css'
    import Swiper from 'swiper'
    import {getBanner} from '@/api/index'
    import axios from 'axios'
    export default {
        data(){
            return{
                imgs: [
                    {pic: require('../assets/l1.jpg')}
                ]
            }
        },
        async mounted(){
            var mySwiper = new Swiper('#swiperIndex',{
                loop: true,
                pagination:{
                    el: '.swiper-pagination',
                    clickable:true
                }
            })

            // let res = await axios.get('http://localhost:3000/banner?type=1',(res)=>{
            await getBanner(1).then((res)=>{
                // console.log(res)
                this.imgs = res.data.banners
            })
            
        }


    }
</script>

<style lang="less">
    #swipercom{
        width:7.5rem;
    #swiperIndex.swiper-container{
            width: 7.1rem;
            height: 2.6rem;
            border-radius: 0.1rem;
        }
        .swiper-slide img{
            width: 100%;
        }

        .swiper-pagination-bullet-active{
            background-color: orange;
        }
     }
</style>
